<template>
  <div class="root">
    <div class="hotbck">
      <div class="hoticon"></div>
      <p class="hotdate">更新日期：05月01号</p>
    </div>

    <!-- 歌单列表 -->
    <div class="lists">
      <div class="list">
        <div class="number">01</div>
        <van-cell-group>
          <van-cell title="单元格" class="哪里都是你" label="队长-哪里都是你">
            <!-- 使用 right-icon 插槽来自定义右侧图标 -->
            <template #right-icon>
              <van-icon name="play" class="play-icon" />
            </template>
          </van-cell>
        </van-cell-group>
      </div>
      <div class="list">
        <div class="number">02</div>
        <van-cell-group>
          <van-cell title="孤勇者《英雄联盟：双城之战》动画剧集中文主题曲" class="哪里都是你" label="队长-哪里都是你">
            <!-- 使用 right-icon 插槽来自定义右侧图标 -->
            <template #right-icon>
              <van-icon name="play" class="play-icon" />
            </template>
          </van-cell>
        </van-cell-group>
      </div>
      <div class="list">
        <div class="number">03</div>
        <van-cell-group>
          <van-cell title="单元格" class="哪里都是你" label="队长-哪里都是你">
            <!-- 使用 right-icon 插槽来自定义右侧图标 -->
            <template #right-icon>
              <van-icon name="play" class="play-icon" />
            </template>
          </van-cell>
        </van-cell-group>
      </div>
    </div>

    <div class="footer" @click="$router.push({name:'FullyList'})">  
        查看完整榜单 >
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped lang="css">
.hotbck {
  height: 3.888rem;
  width: 10rem;
  background-color: aliceblue;
  background: url(//s3.music.126.net/mobile-new/img/hot_music_bg_2x.jpg?f01a252389c26bcf016816242eaa6aee=)
    no-repeat;
  background-size: contain;
  padding-left: 0.5333rem;
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  justify-content: center;
  align-content: flex-start;
}
.hoticon {
  z-index: 100;
  width: 3.7867rem;
  height: 1.7867rem;
  background: url(//s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28c3767992ca4bb6d4887c74880=)
    no-repeat;
  background-size: 4.4267rem 2.5867rem;
  background-position: -0.64rem -0.8rem;
}
.hotdate {
  color: #ffffffcc;
  margin: 0.26667rem 0px 0px;
  font-size: 0.32rem;
}
.list {
  display: flex;
  box-sizing: border-box;
}
.number {
  color: #df3436;
  text-align: center;
  line-height: 1.76rem;
  width: 40px;
  font-size: 0.4533rem;
}
.van-cell-group {
  flex: 1;
  position: relative;
}
.van-cell {
  padding:.0533rem 0rem !important;
}
.van-cell span {
  display: inline-block;
  width: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 20px;
}
.play-icon {
  position: absolute;
  top: 50%;
  right: 0.2667rem;
  transform: translate(0px,-50%);
  font-size: .5867rem;
  color: rgb(175, 175, 175);
  border: 1px solid rgb(173, 173, 173);
  border-radius: .6667rem;
}
.footer{
    height: 1.4667rem;
    color: #99999999;
    font-size: .3733rem;
    text-align: center;
    line-height: 1.4667rem;
}
</style>